<template>
  <div class="box">
       <header class="recommend-header">
      <input type="" id="recommend-serch"  placeholder="搜索酒店/地名/关键词" onfocus="if(placeholder=='搜索酒店/地名/关键词') {placeholder=''}" onblur="if (value=='') {placeholder='搜索酒店/地名/关键词'}">
       <router-link to="/" tag="span">取消</router-link>
      </header>
      <div class="content">
         <p>热门搜索</p>
         <ul>
         <router-link tag='li' :to='items.path' v-for="(items,index) of list" :key='index'>
         	   <p>{{items.name}}</p>
         </router-link>
         </ul>
         <ul>
         <router-link tag='li' :to='items.path' v-for="(items,index) of list1" :key='index'>
         	   <p>{{items.name}}</p>
         </router-link>
         </ul>
         <!--<div class="Hot-serch">
         	 <div class="Hot-serch01">
         	 	 <p>重庆短租</p><p>成都旅游攻略</p><p>厦门清新日式民宿</p>
         	 </div>
         	 <div class="Hot-serch02">
         	 	<p>大理古城舒适套房</p>	<p>爱丽丝仙境民宿</p>
         	 </div>
         </div>-->
         <p>历史搜索 <span @click="deletes" class="iconfont icon-shanchu" style="float:right;margin-right:10px;font-size:15px;color:#000"></span></p>
         <ul>
         <router-link tag='li' :to='items.path' v-for="(items,index) of list" :key='index'>
         	   <p>{{items.name}}</p>
         </router-link>
         </ul>
         <ul>
         <router-link tag='li' :to='items.path' v-for="(items,index) of list1" :key='index'>
         	   <p>{{items.name}}</p>
         </router-link>
         </ul>
        
      </div>
    </div>
</template>
<script>
export default {
	data () {
	   return {
	   	list: [{
        name: '重庆短租',
        icon: '',
        path: '/search'
      }, {
        name: '成都旅游攻略',
        icon: 'iconfont icon-icon-test1',
        path: '/search'
      }, {
        name: '厦门清新日式民宿',
        icon: 'iconfont icon-dingdan',
        path: '/search'
      }
	   	],
	   	 list1:[
      	{
        name: '大理古城舒适套房',
        icon: 'iconfont icon-dingdan',
        path: '/search'
      },
	   	{
        name: '爱丽丝仙境民宿',
        icon: 'iconfont icon-dingdan',
        path: '/search'
      }
      ]	   	
	   }
  },
  methods:{
		deletes () {
			this.list1[0]='' ;console.log(this.list1[0])
		}
	}
	
}	
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
ul{
	 @include rect(100%,0.44rem);
   @include flexbox;
   justify-content:space-around;
   @include align-items();
		li{
			p{
				background:#cecece;
				padding:5px 8px;
  	    color:#333;
			}
		}
	}
	.recommend-header{
		@include rect(100%,0.40rem);
	  @include flexbox;
	  justify-content:center;
	  @include align-items(); 
	#recommend-serch{
		width:80%;
		@include flexbox;
	  justify-content:center;
	  @include align-items(); 
	  text-align:center;
		height:0.22rem;
		border: 1px solid #ccc;
		border-radius: 10px;
		color:#ccc;
	}
	span {
	color:#cecece;
	float:right;
	margin-left:10px;
		}
}
  /*@include rect(100%,0.44rem);
  @include flexbox;
  justify-content:center;
  @include align-items(); 
	}
#recommend-serch{
	width:80%;
	@include flexbox;
  justify-content:center;
  @include align-items(); 
  text-align:center;
	height:0.22rem;
	border: 1px solid #ccc;
	border-radius: 10px;
	color:#ccc;
}
span{
	color:#cecece;
	float:right;
	margin-left:10px;
}
.Hot-serch{
	@include rect(100%,0.84rem);
  @include flexbox;
  @include flex-direction(column);
  justify-content:space-around;
  @include align-items();
  .Hot-serch01{
	@include rect(100%,0.32rem);
  @include flexbox;
   justify-content:space-around;
  @include align-items(); 
  } 
  .Hot-serch02{
	@include rect(100%,0.32rem);
  @include flexbox;
  justify-content:space-around;
  @include align-items(); 
  } 
  p{
  	border:1px solid #cecece;
  	@include background-color(#ddd);
  	padding:5px 8px;
  	color:#aaa;
  }
}*/
</style>
